<template>
  <!-- 购物单 -->
  <div>
    <!-- 头部 -->
    <header class="headerBoxCart">
      <van-row class="headerColTow">
        <van-col
          @click="edit"
          offset="1"
          span="3"
          :style="{ display: displayFilsh }"
          >取消</van-col
        >
        <van-col
          offset="1"
          span="3"
          :style="{ display: displayEdit }"
        ></van-col>
        <van-col offset="5" span="6" id="headercentertext"> 购物车 </van-col>
        <van-col @click="edit" span="8" id="headerlefttext"
          >{{ text }}
          <van-icon name="chat-o" badge="9" size="24" />
        </van-col>
      </van-row>
    </header>
    <section class="conetntMT"></section>
    <!-- 店铺商品信息 -->
    <section>
      <!-- 商铺 -->
      <section class="contentBox">
        <van-row class="content">
          <van-col span="8" id="contentCheckbox">
            <van-checkbox v-model="checkedShop" icon-size="20px">
              <van-icon name="label-o" color="#ccc" size="20" />
              XXX商铺
            </van-checkbox>
          </van-col>
          <van-col offset="8" span="8" id="contetText">领劵 </van-col>
        </van-row>
      </section>
      <!-- 商铺产品 -->
      <van-row class="contentListTop">
        <van-col span="2" id="contentCheckbox">
          <van-checkbox
            v-model="checkedIfo1"
            icon-size="20px"
            class="contentList"
          >
          </van-checkbox>
        </van-col>
        <van-col span="16" class="">
          <van-row>
            <van-col span="6" id="imgbox">
              <van-image
                width="60"
                height="60"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="18" class="">
              <van-row class="contentextCtenter">
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  ><van-col span="24" id="contentText" class="contentTextTwo"
                    >￥38.8</van-col
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="6" id="contetText"
          ><van-button type="default" plain size="normal" @click="showPopup"
            >修改</van-button
          >
        </van-col>
      </van-row>
      <!-- 具体商品 -->
      <van-row class="contentListTop">
        <van-col span="2" id="contentCheckbox">
          <van-checkbox
            v-model="checkedIfo2"
            icon-size="20px"
            class="contentList"
          >
          </van-checkbox>
        </van-col>
        <van-col span="16" class="">
          <van-row>
            <van-col span="6" id="imgbox">
              <van-image
                width="60"
                height="60"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="18" class="">
              <van-row class="contentextCtenter">
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  ><van-col span="24" id="contentText" class="contentTextTwo"
                    >￥38.8</van-col
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="6" id="contetText"
          ><van-button type="default" plain size="normal" @click="showPopup"
            >修改</van-button
          >
        </van-col>
      </van-row>

      <!-- ******************************************************** -->
      <van-row class="content">
        <van-col span="20" class="contentTextOne"> 小计： </van-col>
        <van-col span="4" class="contentTextTwo"> ￥38.88 </van-col>
      </van-row>
    </section>
    <!-- 店铺商品信息 -->
    <section>
      <!-- 商铺 -->
      <section class="contentBox">
        <van-row class="content">
          <van-col span="8" id="contentCheckbox">
            <van-checkbox v-model="checkedShop" icon-size="20px">
              <van-icon name="label-o" color="#ccc" size="20" />
              XXX商铺
            </van-checkbox>
          </van-col>
          <van-col offset="8" span="8" id="contetText">领劵 </van-col>
        </van-row>
      </section>
      <!-- 商铺产品 -->
      <van-row class="contentListTop">
        <van-col span="2" id="contentCheckbox">
          <van-checkbox
            v-model="checkedIfo1"
            icon-size="20px"
            class="contentList"
          >
          </van-checkbox>
        </van-col>
        <van-col span="16" class="">
          <van-row>
            <van-col span="6" id="imgbox">
              <van-image
                width="60"
                height="60"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="18" class="">
              <van-row class="contentextCtenter">
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  ><van-col span="24" id="contentText" class="contentTextTwo"
                    >￥38.8</van-col
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="6" id="contetText"
          ><van-button type="default" plain size="normal" @click="showPopup"
            >修改</van-button
          >
        </van-col>
      </van-row>
      <!-- 具体商品 -->
      <van-row class="contentListTop">
        <van-col span="2" id="contentCheckbox">
          <van-checkbox
            v-model="checkedIfo2"
            icon-size="20px"
            class="contentList"
          >
          </van-checkbox>
        </van-col>
        <van-col span="16" class="">
          <van-row>
            <van-col span="6" id="imgbox">
              <van-image
                width="60"
                height="60"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="18" class="">
              <van-row class="contentextCtenter">
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  ><van-col span="24" id="contentText" class="contentTextTwo"
                    >￥38.8</van-col
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="6" id="contetText"
          ><van-button type="default" plain size="normal" @click="showPopup"
            >修改</van-button
          >
        </van-col>
      </van-row>

      <!-- ******************************************************** -->
      <van-row class="content">
        <van-col span="20" class="contentTextOne"> 小计： </van-col>
        <van-col span="4" class="contentTextTwo"> ￥38.88 </van-col>
      </van-row>
    </section>
    <!-- 店铺商品信息 -->
    <section>
      <!-- 商铺 -->
      <section class="contentBox">
        <van-row class="content">
          <van-col span="8" id="contentCheckbox">
            <van-checkbox v-model="checkedShop" icon-size="20px">
              <van-icon name="label-o" color="#ccc" size="20" />
              XXX商铺
            </van-checkbox>
          </van-col>
          <van-col offset="8" span="8" id="contetText">领劵 </van-col>
        </van-row>
      </section>
      <!-- 商铺产品 -->
      <van-row class="contentListTop">
        <van-col span="2" id="contentCheckbox">
          <van-checkbox
            v-model="checkedIfo1"
            icon-size="20px"
            class="contentList"
          >
          </van-checkbox>
        </van-col>
        <van-col span="16" class="">
          <van-row>
            <van-col span="6" id="imgbox">
              <van-image
                width="60"
                height="60"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="18" class="">
              <van-row class="contentextCtenter">
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  ><van-col span="24" id="contentText" class="contentTextTwo"
                    >￥38.8</van-col
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="6" id="contetText"
          ><van-button type="default" plain size="normal" @click="showPopup"
            >修改</van-button
          >
        </van-col>
      </van-row>
      <!-- 具体商品 -->
      <van-row class="contentListTop">
        <van-col span="2" id="contentCheckbox">
          <van-checkbox
            v-model="checkedIfo2"
            icon-size="20px"
            class="contentList"
          >
          </van-checkbox>
        </van-col>
        <van-col span="16" class="">
          <van-row>
            <van-col span="6" id="imgbox">
              <van-image
                width="60"
                height="60"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="18" class="">
              <van-row class="contentextCtenter">
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  >黑美西瓜鲜美多汁2个起卖</van-col
                >
                <van-col offset="1" span="24" id="contentText"
                  ><van-col span="24" id="contentText" class="contentTextTwo"
                    >￥38.8</van-col
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="6" id="contetText"
          ><van-button type="default" plain size="normal" @click="showPopup"
            >修改</van-button
          >
        </van-col>
      </van-row>

      <!-- ******************************************************** -->
      <van-row class="content">
        <van-col span="20" class="contentTextOne"> 小计： </van-col>
        <van-col span="4" class="contentTextTwo"> ￥38.88 </van-col>
      </van-row>
    </section>

    <!-- **********50********** -->
    <section>
      <!-- 解决fixed -->
      <van-row style="height: 150px">
        <van-col></van-col>
      </van-row>
    </section>
    <!-- **********50********** -->
    <!-- 底部结算 -->
    <footer id="footerBox" :style="{ display: displayEdit }">
      <van-row class="textPadding">
        <van-col span="11">
          <van-checkbox v-model="checkedAll" @click="selectAll"
            >全选</van-checkbox
          >
        </van-col>
        <van-col span="7" id="contentText">
          <van-row>
            <van-col span="10s">合计：</van-col>
            <van-col span="14" class="contentTextTwo">￥38.5</van-col>
          </van-row>
          <van-row>
            <van-col span="24">不包含配送费</van-col>
          </van-row>
        </van-col>
        <van-col offset="1" span="5"
          ><van-button type="primary" @click="accountPush"
            >结算</van-button
          ></van-col
        >
      </van-row>
    </footer>
    <!-- 编辑切换 -->
    <footer id="footerBox" :style="{ display: displayFilsh }">
      <van-row class="textPadding">
        <van-col span="11">
          <van-checkbox v-model="checkedAll">全选</van-checkbox>
        </van-col>
        <van-col span="7" id="contentText">
          <!-- <van-row>
            <van-col span="10s">合计：</van-col>
            <van-col span="14" class="contentTextTwo">￥38.5</van-col>
          </van-row> -->
          <!-- <van-row>
            <van-col span="24">不包含配送费</van-col>
          </van-row> -->
        </van-col>
        <van-col offset="1" span="5"
          ><van-button type="primary">删除</van-button></van-col
        >
      </van-row>
    </footer>
    <!-- 修改弹窗 -->
    <main-tab-bar></main-tab-bar>
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <modificton-commodity></modificton-commodity>
    </van-popup>
    <!-- 选择弹窗 -->
    <van-popup v-model="selectShow" class="selectShowBox"
      >请至少选择一件商品!</van-popup
    >
  </div>
</template>

<script>
import mainTabBar from "../../components/mainTabBar.vue";
import modifictonCommodity from "../../components/cart/modifictonCommodity.vue";
let that = false;
export default {
  name: "cart",
  data() {
    return {
      checkedShop: false,
      checkedIfo1: false,
      checkedIfo2: false,
      checkedAll: false,
      selectShow: that,
      // checked3: true,
      displayEdit: "block",
      displayFilsh: "none",
      text: "编辑",
      show: false,
    };
  },
  components: {
    mainTabBar,
    modifictonCommodity,
  },
  // 弹窗显示
  methods: {
    showPopup() {
      this.show = true;
    },
    // 编辑切换
    edit() {
      if (this.displayEdit === "block" && this.displayFilsh === "none") {
        this.displayEdit = "none";
        this.displayFilsh = "block";
        this.text = "完成";
      } else {
        this.displayEdit = "block";
        this.displayFilsh = "none";
        this.text = "编辑";
      }
    },
    // 结算跳转
    accountPush() {
      if (
        this.checkedShop === true ||
        this.checkedIfo1 === true ||
        this.checkedIfo2 === true
      ) {
        this.$router.push("/account");
      } else {
        this.selectShow = true;
      }
    },
    // 商品全部选择
    selectAll() {
      if (this.checkedAll === true) {
        this.checkedShop = true;
        this.checkedIfo1 = true;
        this.checkedIfo2 = true;
        this.checkedAll = true;
      } else {
        this.checkedShop = false;
        this.checkedIfo1 = false;
        this.checkedIfo2 = false;
        this.checkedAll = false;
      }
    },
  },
  computed: {},
};
</script>

<style scoped>
.conetntMT {
  margin-top: 55px;
}
.headerBoxCart {
  width: 100%;
  position: fixed;
  top: 0;
  height: 45px;
  background-color: #4bd863;
  z-index: 222222;
}
.textPadding {
  padding: 10px;
}
.headerColTow {
  /* padding-top: 40px; */
  padding: 10px 0;
  height: 35px;
  line-height: 35px;
  color: #ffffff;
  font-weight: 800;
  background-color: #4bd863;
}
#headercentertext {
  font-size: 24px;
  text-align: center;
}
#headerlefttext {
  padding: 0 10px;
  text-align: right;
}
.van-checkbox {
  height: 40px;
  line-height: 40px;
}
.content {
  margin-top: 10px;
  /* padding: 10px; */
  padding-left: 10px;
  height: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  line-height: 50px;
  box-sizing: border-box;
}
.contentTextOne {
  text-align: right;
  padding-left: 10px;
}
.contentTextTwo {
  text-align: left;
  padding-right: 10px;
  color: red;
  font-weight: 600;
}
.contentList {
  padding-left: 10px;
  height: 80px;
  line-height: 80px;
}
.contentListTop {
  height: 80px;
  /* line-height: 80px; */
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
#contetText {
  padding-right: 20px;
  text-align: right;
  color: #4bd863;
  font-weight: 800;
  line-height: 50px;
}
#contentText {
  font-size: 14px;
}
#imgbox {
  padding-left: 5px;
  margin-top: 10px;
  clear: both;
}
.contentextCtenter {
  line-height: 20px;
  margin-top: 10px;
}
#footerBox {
  width: 100%;
  /* height: 80px; */
  position: fixed;
  bottom: 49px;
  background-color: #fff;
  /* display: none; */
}
.selectShowBox {
  padding: 10px 20px;
  width: 40%;
  border-radius: 5px;
  color: rgb(88, 77, 77);
  background-color: rgba(245, 231, 229, 0.959);
}
</style>
